<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>已购买应用</title>
    <link href="../../assets/lib/layui/css/layui.css" rel="stylesheet" />
    <link href="../../assets/lib/winui/css/winui.css" rel="stylesheet" />
    <style>
        .app-cards-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 10px;
            margin-top: 15px;
        }

        .app-card {
            width: calc(25% - 20px);
            min-width: 280px;
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .app-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
        }

        .app-card-header {
            padding: 15px;
            background: #f8f8f8;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
        }

        .app-icon {
            width: 40px;
            height: 40px;
            background: #5FB878;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            margin-right: 10px;
            font-size: 20px;
        }

        .app-name {
            font-weight: bold;
            font-size: 16px;
            color: #333;
            flex: 1;
        }

        .app-card-body {
            padding: 15px;
        }

        .app-desc {
            color: #666;
            margin-bottom: 15px;
            min-height: 40px;
            line-height: 1.5;
        }

        .app-info {
            display: flex;
            justify-content: space-between;
            color: #888;
            font-size: 13px;
            margin-bottom: 10px;
        }

        .app-status {
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 12px;
            display: inline-block;
            margin-top: 10px;
        }

        .status-active {
            background: rgba(95, 184, 120, 0.1);
            color: #5FB878;
            border: 1px solid rgba(95, 184, 120, 0.2);
        }

        .status-expired {
            background: rgba(255, 87, 34, 0.1);
            color: #FF5722;
            border: 1px solid rgba(255, 87, 34, 0.2);
        }

        .empty-data {
            width: 100%;
            text-align: center;
            padding: 60px 0;
            color: #999;
        }

        .empty-data i {
            font-size: 50px;
            color: #e0e0e0;
            display: block;
            margin-bottom: 20px;
        }

        @media screen and (max-width: 1200px) {
            .app-card {
                width: calc(33.33% - 20px);
            }
        }

        @media screen and (max-width: 900px) {
            .app-card {
                width: calc(50% - 20px);
            }
        }

        @media screen and (max-width: 600px) {
            .app-card {
                width: 100%;
            }
        }

        /* 搜索框样式 */
        .search-container {
            position: relative;
            width: 300px;
            float: left;
            margin-right: 10px;
        }

        .search-input {
            width: 100%;
            padding-right: 30px;
            height: 32px;
            border-radius: 2px;
        }

        .search-icon {
            position: absolute;
            right: 10px;
            top: 9px;
            color: #999;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="winui-toolbar">
        <div class="winui-tool">
            <div class="search-container">
                <input type="text" id="searchInput" placeholder="请输入应用名称或描述" class="layui-input search-input">
                <i class="layui-icon layui-icon-search search-icon" id="searchBtn"></i>
            </div>
            <button id="reloadTable" class="winui-toolbtn search-table-btn-right"><i class="fa fa-refresh"
                    aria-hidden="true"></i>
                刷新数据
            </button>
        </div>
    </div>

    <div style="margin:auto 10px;">
        <!-- 应用卡片容器 -->
        <div id="appCardsContainer" class="app-cards-container">
            <!-- 卡片将通过JS动态生成 -->
        </div>

        <!-- 空数据提示 -->
        <div id="emptyData" class="empty-data" style="display: none;">
            <i class="layui-icon layui-icon-face-surprised"></i>
            <p>暂无应用数据</p>
            <button id="retryBtn" class="layui-btn layui-btn-primary">重新加载</button>
        </div>
    </div>

    <script src="../../assets/lib/layui/layui.js"></script>
    <script src="../../assets/lib/layui/custom.js"></script>
    <script type="text/javascript">
        layui.config({ base: '../../js/tenant/' }).use('purchasedService');
    </script>
</body>

</html>